<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Module: ActionView::Helpers::ScriptaculousHelper</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <link rel="stylesheet" href="../../.././rdoc-style.css" type="text/css" media="screen" />
  <script type="text/javascript">
  // <![CDATA[

  function popupCode( url ) {
    window.open(url, "Code", "resizable=yes,scrollbars=yes,toolbar=no,status=no,height=150,width=400")
  }

  function toggleCode( id ) {
    if ( document.getElementById )
      elem = document.getElementById( id );
    else if ( document.all )
      elem = eval( "document.all." + id );
    else
      return false;

    elemStyle = elem.style;
    
    if ( elemStyle.display != "block" ) {
      elemStyle.display = "block"
    } else {
      elemStyle.display = "none"
    }

    return true;
  }
  
  // Make codeblocks hidden by default
  document.writeln( "<style type=\"text/css\">div.method-source-code { display: none }</style>" )
  
  // ]]>
  </script>

</head>
<body>



    <div id="classHeader">
        <table class="header-table">
        <tr class="top-aligned-row">
          <td><strong>Module</strong></td>
          <td class="class-name-in-header">ActionView::Helpers::ScriptaculousHelper</td>
        </tr>
        <tr class="top-aligned-row">
            <td><strong>In:</strong></td>
            <td>
                <a href="../../../files/vendor/rails/actionpack/lib/action_view/helpers/scriptaculous_helper_rb.html">
                vendor/rails/actionpack/lib/action_view/helpers/scriptaculous_helper.rb
                </a>
        <br />
            </td>
        </tr>

        </table>
    </div>
  <!-- banner header -->

  <div id="bodyContent">



  <div id="contextContent">

    <div id="description">
      <p>
Provides a set of helpers for calling Scriptaculous JavaScript functions,
including those which create Ajax controls and visual effects.
</p>
<p>
To be able to use these helpers, you must include the Prototype JavaScript
framework and the Scriptaculous JavaScript library in your pages. See the
documentation for <a
href="JavaScriptHelper.html">ActionView::Helpers::JavaScriptHelper</a> for
more information on including the necessary JavaScript.
</p>
<p>
The Scriptaculous helpers&#8217; behavior can be tweaked with various
options. See the documentation at <a
href="http://script.aculo.us">script.aculo.us</a> for more information on
using these helpers in your application.
</p>

    </div>


   </div>

    <div id="method-list">
      <h3 class="section-bar">Methods</h3>

      <div class="name-list">
      <a href="#M000954">draggable_element</a>&nbsp;&nbsp;
      <a href="#M000955">drop_receiving_element</a>&nbsp;&nbsp;
      <a href="#M000953">sortable_element</a>&nbsp;&nbsp;
      <a href="#M000952">visual_effect</a>&nbsp;&nbsp;
      </div>
    </div>

  </div>


    <!-- if includes -->

    <div id="section">


    <div id="constants-list">
      <h3 class="section-bar">Constants</h3>

      <div class="name-list">
        <table summary="Constants">
        <tr class="top-aligned-row context-row">
          <td class="context-item-name">TOGGLE_EFFECTS</td>
          <td>=</td>
          <td class="context-item-value">[:toggle_appear, :toggle_slide, :toggle_blind]</td>
        </tr>
        </table>
      </div>
    </div>



      


    <!-- if method_list -->
    <div id="methods">
      <h3 class="section-bar">Public Instance methods</h3>

      <div id="method-M000954" class="method-detail">
        <a name="M000954"></a>

        <div class="method-heading">
          <a href="#M000954" class="method-signature">
          <span class="method-name">draggable_element</span><span class="method-args">(element_id, options = {})</span>
          </a>
        </div>
      
        <div class="method-description">
          <p>
Makes the element with the DOM ID specified by <tt>element_id</tt>
draggable.
</p>
<p>
Example:
</p>
<pre>
  &lt;%= draggable_element(&quot;my_image&quot;, :revert =&gt; true)
</pre>
<p>
You can change the behaviour with various options, see <a
href="http://script.aculo.us">script.aculo.us</a> for more documentation.
</p>
          <p><a class="source-toggle" href="#"
            onclick="toggleCode('M000954-source');return false;">[Source]</a></p>
          <div class="method-source-code" id="M000954-source">
<pre>
     <span class="ruby-comment cmt"># File vendor/rails/actionpack/lib/action_view/helpers/scriptaculous_helper.rb, line 164</span>
164:       <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">draggable_element</span>(<span class="ruby-identifier">element_id</span>, <span class="ruby-identifier">options</span> = {})
165:         <span class="ruby-identifier">javascript_tag</span>(<span class="ruby-identifier">draggable_element_js</span>(<span class="ruby-identifier">element_id</span>, <span class="ruby-identifier">options</span>).<span class="ruby-identifier">chop!</span>)
166:       <span class="ruby-keyword kw">end</span>
</pre>
          </div>
        </div>
      </div>

      <div id="method-M000955" class="method-detail">
        <a name="M000955"></a>

        <div class="method-heading">
          <a href="#M000955" class="method-signature">
          <span class="method-name">drop_receiving_element</span><span class="method-args">(element_id, options = {})</span>
          </a>
        </div>
      
        <div class="method-description">
          <p>
Makes the element with the DOM ID specified by <tt>element_id</tt> receive
dropped draggable elements (created by <a
href="ScriptaculousHelper.html#M000954">draggable_element</a>). and make an
AJAX call By default, the action called gets the DOM ID of the element as
parameter.
</p>
<p>
Example:
</p>
<pre>
  &lt;%= drop_receiving_element(&quot;my_cart&quot;, :url =&gt;
    { :controller =&gt; &quot;cart&quot;, :action =&gt; &quot;add&quot; }) %&gt;
</pre>
<p>
You can change the behaviour with various options, see <a
href="http://script.aculo.us">script.aculo.us</a> for more documentation.
</p>
          <p><a class="source-toggle" href="#"
            onclick="toggleCode('M000955-source');return false;">[Source]</a></p>
          <div class="method-source-code" id="M000955-source">
<pre>
     <span class="ruby-comment cmt"># File vendor/rails/actionpack/lib/action_view/helpers/scriptaculous_helper.rb, line 183</span>
183:       <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">drop_receiving_element</span>(<span class="ruby-identifier">element_id</span>, <span class="ruby-identifier">options</span> = {})
184:         <span class="ruby-identifier">javascript_tag</span>(<span class="ruby-identifier">drop_receiving_element_js</span>(<span class="ruby-identifier">element_id</span>, <span class="ruby-identifier">options</span>).<span class="ruby-identifier">chop!</span>)
185:       <span class="ruby-keyword kw">end</span>
</pre>
          </div>
        </div>
      </div>

      <div id="method-M000953" class="method-detail">
        <a name="M000953"></a>

        <div class="method-heading">
          <a href="#M000953" class="method-signature">
          <span class="method-name">sortable_element</span><span class="method-args">(element_id, options = {})</span>
          </a>
        </div>
      
        <div class="method-description">
          <p>
Makes the element with the DOM ID specified by <tt>element_id</tt> sortable
by drag-and-drop and make an Ajax call whenever the sort order has changed.
By default, the action called gets the serialized sortable element as
parameters.
</p>
<p>
Example:
</p>
<pre>
  &lt;%= sortable_element(&quot;my_list&quot;, :url =&gt; { :action =&gt; &quot;order&quot; }) %&gt;
</pre>
<p>
In the example, the action gets a &quot;my_list&quot; array parameter
containing the values of the ids of elements the sortable consists of, in
the current order.
</p>
<p>
Important: For this to work, the sortable elements must have id attributes
in the form &quot;string_identifier&quot;. For example, &quot;item_1&quot;.
Only the identifier part of the id attribute will be serialized.
</p>
<p>
Additional <tt>options</tt> are:
</p>
<table>
<tr><td valign="top"><tt>:format</tt>:</td><td>A regular expression to determine what to send as the serialized id to the
server (the default is <tt>/^[^_]*_(.*)$/</tt>).

</td></tr>
<tr><td valign="top"><tt>:constraint</tt>:</td><td>Whether to constrain the dragging to either <tt>:horizontal</tt> or
<tt>:vertical</tt> (or false to make it unconstrained).

</td></tr>
<tr><td valign="top"><tt>:overlap</tt>:</td><td>Calculate the item overlap in the <tt>:horizontal</tt> or
<tt>:vertical</tt> direction.

</td></tr>
<tr><td valign="top"><tt>:tag</tt>:</td><td>Which children of the container element to treat as sortable (default is
<tt>li</tt>).

</td></tr>
<tr><td valign="top"><tt>:containment</tt>:</td><td>Takes an element or array of elements to treat as potential drop targets
(defaults to the original target element).

</td></tr>
<tr><td valign="top"><tt>:only</tt>:</td><td>A CSS class name or arry of class names used to filter out child elements
as candidates.

</td></tr>
<tr><td valign="top"><tt>:scroll</tt>:</td><td>Determines whether to scroll the list during drag operationsif the list
runs past the visual border.

</td></tr>
<tr><td valign="top"><tt>:tree</tt>:</td><td>Determines whether to treat nested lists as part of the main sortable list.
This means that you can create multi- layer lists, and not only sort items
at the same level, but drag and sort items between levels.

</td></tr>
<tr><td valign="top"><tt>:hoverclass</tt>:</td><td>If set, the Droppable will have this additional CSS class when an accepted
Draggable is hovered over it.

</td></tr>
<tr><td valign="top"><tt>:handle</tt>:</td><td>Sets whether the element should only be draggable by an embedded handle.
The value may be a string referencing a CSS class value (as of
script.aculo.us V1.5). The first child/grandchild/etc. element found within
the element that has this CSS class value will be used as the handle.

</td></tr>
<tr><td valign="top"><tt>:ghosting</tt>:</td><td>Clones the element and drags the clone, leaving the original in place until
the clone is dropped (defaut is <tt>false</tt>).

</td></tr>
<tr><td valign="top"><tt>:dropOnEmpty</tt>:</td><td>If set to true, the Sortable container will be made into a Droppable, that
can receive a Draggable (as according to the containment rules) as a child
element when there are no more elements inside (defaut is <tt>false</tt>).

</td></tr>
<tr><td valign="top"><tt>:onChange</tt>:</td><td>Called whenever the sort order changes while dragging. When dragging from
one Sortable to another, the callback is called once on each Sortable. Gets
the affected element as its parameter.

</td></tr>
<tr><td valign="top"><tt>:onUpdate</tt>:</td><td>Called when the drag ends and the Sortable&#8216;s order is changed in any
way. When dragging from one Sortable to another, the callback is called
once on each Sortable. Gets the container as its parameter.

</td></tr>
</table>
<p>
See <a href="http://script.aculo.us">script.aculo.us</a> for more
documentation.
</p>
          <p><a class="source-toggle" href="#"
            onclick="toggleCode('M000953-source');return false;">[Source]</a></p>
          <div class="method-source-code" id="M000953-source">
<pre>
     <span class="ruby-comment cmt"># File vendor/rails/actionpack/lib/action_view/helpers/scriptaculous_helper.rb, line 138</span>
138:       <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">sortable_element</span>(<span class="ruby-identifier">element_id</span>, <span class="ruby-identifier">options</span> = {})
139:         <span class="ruby-identifier">javascript_tag</span>(<span class="ruby-identifier">sortable_element_js</span>(<span class="ruby-identifier">element_id</span>, <span class="ruby-identifier">options</span>).<span class="ruby-identifier">chop!</span>)
140:       <span class="ruby-keyword kw">end</span>
</pre>
          </div>
        </div>
      </div>

      <div id="method-M000952" class="method-detail">
        <a name="M000952"></a>

        <div class="method-heading">
          <a href="#M000952" class="method-signature">
          <span class="method-name">visual_effect</span><span class="method-args">(name, element_id = false, js_options = {})</span>
          </a>
        </div>
      
        <div class="method-description">
          <p>
Returns a JavaScript snippet to be used on the Ajax callbacks for starting
visual effects.
</p>
<p>
Example:
</p>
<pre>
  &lt;%= link_to_remote &quot;Reload&quot;, :update =&gt; &quot;posts&quot;,
        :url =&gt; { :action =&gt; &quot;reload&quot; },
        :complete =&gt; visual_effect(:highlight, &quot;posts&quot;, :duration =&gt; 0.5)
</pre>
<p>
If no element_id is given, it assumes &quot;element&quot; which should be a
local variable in the generated JavaScript execution context. This can be
used for example with <a
href="ScriptaculousHelper.html#M000955">drop_receiving_element</a>:
</p>
<pre>
  &lt;%= drop_receiving_element (...), :loading =&gt; visual_effect(:fade) %&gt;
</pre>
<p>
This would fade the element that was dropped on the drop receiving element.
</p>
<p>
For toggling visual effects, you can use :toggle_appear, :toggle_slide, and
:toggle_blind which will alternate between appear/fade, slidedown/slideup,
and blinddown/blindup respectively.
</p>
<p>
You can change the behaviour with various options, see <a
href="http://script.aculo.us">script.aculo.us</a> for more documentation.
</p>
          <p><a class="source-toggle" href="#"
            onclick="toggleCode('M000952-source');return false;">[Source]</a></p>
          <div class="method-source-code" id="M000952-source">
<pre>
    <span class="ruby-comment cmt"># File vendor/rails/actionpack/lib/action_view/helpers/scriptaculous_helper.rb, line 44</span>
44:       <span class="ruby-keyword kw">def</span> <span class="ruby-identifier">visual_effect</span>(<span class="ruby-identifier">name</span>, <span class="ruby-identifier">element_id</span> = <span class="ruby-keyword kw">false</span>, <span class="ruby-identifier">js_options</span> = {})
45:         <span class="ruby-identifier">element</span> = <span class="ruby-identifier">element_id</span> <span class="ruby-value">? </span><span class="ruby-identifier">element_id</span>.<span class="ruby-identifier">to_json</span> <span class="ruby-operator">:</span> <span class="ruby-value str">&quot;element&quot;</span>
46:         
47:         <span class="ruby-identifier">js_options</span>[<span class="ruby-identifier">:queue</span>] = <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">js_options</span>[<span class="ruby-identifier">:queue</span>].<span class="ruby-identifier">is_a?</span>(<span class="ruby-constant">Hash</span>)
48:           <span class="ruby-value str">'{'</span> <span class="ruby-operator">+</span> <span class="ruby-identifier">js_options</span>[<span class="ruby-identifier">:queue</span>].<span class="ruby-identifier">map</span> {<span class="ruby-operator">|</span><span class="ruby-identifier">k</span>, <span class="ruby-identifier">v</span><span class="ruby-operator">|</span> <span class="ruby-identifier">k</span> <span class="ruby-operator">==</span> <span class="ruby-identifier">:limit</span> <span class="ruby-operator">?</span> <span class="ruby-node">&quot;#{k}:#{v}&quot;</span> <span class="ruby-operator">:</span> <span class="ruby-node">&quot;#{k}:'#{v}'&quot;</span> }.<span class="ruby-identifier">join</span>(<span class="ruby-value str">','</span>) <span class="ruby-operator">+</span> <span class="ruby-value str">'}'</span>
49:         <span class="ruby-keyword kw">elsif</span> <span class="ruby-identifier">js_options</span>[<span class="ruby-identifier">:queue</span>]
50:           <span class="ruby-node">&quot;'#{js_options[:queue]}'&quot;</span>
51:         <span class="ruby-keyword kw">end</span> <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">js_options</span>[<span class="ruby-identifier">:queue</span>]
52:         
53:         [<span class="ruby-identifier">:endcolor</span>, <span class="ruby-identifier">:direction</span>, <span class="ruby-identifier">:startcolor</span>, <span class="ruby-identifier">:scaleMode</span>, <span class="ruby-identifier">:restorecolor</span>].<span class="ruby-identifier">each</span> <span class="ruby-keyword kw">do</span> <span class="ruby-operator">|</span><span class="ruby-identifier">option</span><span class="ruby-operator">|</span>
54:           <span class="ruby-identifier">js_options</span>[<span class="ruby-identifier">option</span>] = <span class="ruby-node">&quot;'#{js_options[option]}'&quot;</span> <span class="ruby-keyword kw">if</span> <span class="ruby-identifier">js_options</span>[<span class="ruby-identifier">option</span>]
55:         <span class="ruby-keyword kw">end</span>
56: 
57:         <span class="ruby-keyword kw">if</span> <span class="ruby-constant">TOGGLE_EFFECTS</span>.<span class="ruby-identifier">include?</span> <span class="ruby-identifier">name</span>.<span class="ruby-identifier">to_sym</span>
58:           <span class="ruby-node">&quot;Effect.toggle(#{element},'#{name.to_s.gsub(/^toggle_/,'')}',#{options_for_javascript(js_options)});&quot;</span>
59:         <span class="ruby-keyword kw">else</span>
60:           <span class="ruby-node">&quot;new Effect.#{name.to_s.camelize}(#{element},#{options_for_javascript(js_options)});&quot;</span>
61:         <span class="ruby-keyword kw">end</span>
62:       <span class="ruby-keyword kw">end</span>
</pre>
          </div>
        </div>
      </div>


    </div>


  </div>


<div id="validator-badges">
  <p><small><a href="http://validator.w3.org/check/referer">[Validate]</a></small></p>
</div>

</body>
</html>